<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery 2.2.2.js"></script>
		<script src="js/jquery-ui.min.js"></script>
		<script src="js/jsPlumb-2.0.7-min.js"></script>
		<script src="script/IVRnew.js"></script>
		<link rel="stylesheet" href="css/jquery-ui.min.css" />
		<script src="js/Math.uuid.js"></script>
		<link rel="stylesheet" href="css/IVRnew.css">
		<style type="text/css">
			p {
				margin: 0;
				padding: 0;
			}
			
			.node {
				/*box-shadow: 2px 2px 19px #aaa;
				-o-box-shadow: 2px 2px 19px #aaa;
				-webkit-box-shadow: 2px 2px 19px #aaa;
				-moz-box-shadow: 2px 2px 19px #aaa;
				-moz-border-radius: 0.5em;
				border-radius: 0.5em;
				opacity: 0.8;
				filter: alpha(opacity=80);
				border: 1px solid #346789;
				width: 70px;
				text-align: center;
				z-index: 20;
				position: absolute;
				background-color: #eeeeef;
				color: black;
				padding: 10px;
				font-size: 9pt;
				cursor: pointer;
				height: 30px;
				line-height: 30px;
				*/
				box-shadow: 2px 2px 19px #aaa;
				-o-box-shadow: 2px 2px 19px #aaa;
				-webkit-box-shadow: 2px 2px 19px #aaa;
				-moz-box-shadow: 2px 2px 19px #aaa;
				width: 55px;
				height: 65px;
				position: absolute;
				border: 1px solid #346789;
				margin: 5px;
			}
			
			.node .nodeImg {
				width: 100%;
				height: 50px;
				position: absolute;
				display: block !important;
				/*拖拽过后会导致图片不显示，这句是必须的*/
			}
			
			.node .text {
				position: absolute;
				width: 100%;
				top: 50px;
				text-align: center;
				font-size: 10px;
			}
			
			.node.node_1 {
				left: 30px;
				top: 20px;
			}
			
			.node.node_2 {
				left: 105px;
				top: 20px;
			}
			
			.node.node_3 {
				left: 30px;
				top: 100px;
			}
			
			.node.node_4 {
				left: 105px;
				top: 100px;
			}
			
			.node.node_5 {
				left: 30px;
				top: 180px;
			}
			
			.node.node_6 {
				left: 105px;
				top: 180px;
			}
			
			.node.node_7 {
				left: 30px;
				top: 260px;
			}
			
			.node:hover {
				box-shadow: 2px 2px 19px #444;
				-o-box-shadow: 2px 2px 19px #444;
				-webkit-box-shadow: 2px 2px 19px #444;
				-moz-box-shadow: 2px 2px 19px #444;
				opacity: 0.8;
				filter: alpha(opacity=80);
			}
			
			#left {
				position: absolute;
				width: 200px;
				height: 500px;
				border: solid 1px;
			}
			
			#centerContainer {
				position: absolute;
				left: 220px;
			}
			
			#right {
				position: absolute;
				width: 1300px;
				height: 800px;
				border: solid 1px;
			}
			
			#save {
				position: absolute;
				left: 1520px;
			}
			
			#load {
				position: absolute;
				left: 1520px;
				top: 40px;
			}
			
			.jsplumb-overlay {
				z-index: 20;
				background-color: white;
				cursor: pointer;
				font-size: 14px;
			}
			
			.jsplumb-endpoint {
				z-index: 100;
			}
			
			.close {
				width: 10px;
				height: 10px;
				position: absolute;
			}
			.voiceDialog{
				height: auto !important;
			}
		</style>
	</head>

	<body>
		<div id="left">
			<div class="node node_1" id="node1">
				<img src="img/huru.png" class="nodeImg" />
				<div class="text">开始</div>
			</div>

			<div class="node node_2" id="node2">
				<img src="img/jieting.png" class="nodeImg" />
				<div class="text">应答</div>
			</div>

			<div class="node node_3" id="node3">
				<img src="img/caidan.png" class="nodeImg" />
				<div class="text">菜单</div>
			</div>
			<div class="node node_4" id="node4">
				<img src="img/duilie.png" class="nodeImg" />
				<div class="text">队列</div>
			</div>
			<div class="node node_5" id="node5">
				<img src="img/huchu.png" class="nodeImg" />
				<div class="text">拨号</div>
			</div>
			<div class="node node_6" id="node6">
				<img src="img/ring.png" class="nodeImg" />
				<div class="text">语音</div>
			</div>
			<div class="node node_7" id="node7">
				<img src="img/guaduan.png" class="nodeImg" />
				<div class="text">结束</div>
			</div>

		</div>
		<div id="centerContainer" >

			<div id="right">
				<div id="voiceDialog" title="提示音" class="voiceDialog" >
					<ul style="list-style-type: none; padding-left:5px ;width:250px">
						<li style="width: 250px;margin-bottom: 3px;">
							<div style="width:80px ;display: inline-block;"><span >请选择：</span></div>
							<select style="width:150px" id="dialogSelect">
								<option value="none" selected="selected">none</option>
								<option value ="voice1">voice1</option>
 								<option value ="voice2">voice2</option>
  								<option value="voice3">voice3</option>
  								<option value="voice4">voice4</option>
							</select>
							
						</li>
						<li style="width: 250px;margin-bottom: 3px;">
							<div style="width:80px;display: inline-block;"><span >重复循环：</span></div>
							<select style="width:150px" id="loopSelect">
								<option value="none">none</option>
								<option value ="1" selected="selected">1</option>
 								<option value ="2">2</option>
  								<option value="3">3</option>
  								<option value="4">4</option>
  								<option value="5">5</option>
  								<option value="6">6</option>
  								<option value="7">7</option>
  								<option value="8">8</option>
  								<option value="9">9</option>
  								
							</select>
						</li>
						<li style="width: 250px;margin-bottom: 3px;">
							<div style="width:80px;display: inline-block;"><span >超时：</span></div>
							<input id="timeout" style="border-style: none none solid;"/>
						</li>
						<li style="width: 250px;margin-bottom: 3px;">
							<div style="display: inline-block;"><span >允许拨打其他分机：</span></div>
							<input id="check" type="checkbox" name="yes">
						</li>
					</ul>
									
				</div>
			</div>
		</div>

		<div id="save">
			<input type="button" value="保存" onclick="save()" />
		</div>
		<div id="load">
			<input type="button" value="导入" onclick="load()" />
		</div>
	</body>

</html>